<template>
  <div class="EchartPractice">
    <div id="main"></div>
    <div id="main2"></div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      category: [],
      Time: [],
      months: [],
      counts: [],
      Proportion: [],
      totalArticles: 0,
    }
  },
  watch: {
    category: function (newVlue, oldVlue) {
      // console.log('hello')
      this.drawChartCircle(newVlue)
    },
    months: function (newVal, oldVal) {
      // console.log(newVal, this.counts)
      // console.log(this.Proportion)

      this.drawChart(newVal, this.counts, this.Proportion)
    },
  },
  created() {
    this.$api.getEchartCircleData().then(
      (res) => {
        const { code, message, result } = res.data
        if (code == 0) {
          // this.$message.success(message)
          this.category = result
        } else {
          this.$message.error(message)
        }
      },
      (res) => {
        // console.log(res)
      }
    ),
      this.$api.getEchartBarData().then((res) => {
        const { code, message, result } = res.data
        if (code == 0) {
          result.forEach((item) => {
            this.totalArticles += item.count
          })
          result.forEach((item) => {
            this.months.push(item.month)
            this.counts.push(item.count)
            this.Proportion.push(
              ((item.count / this.totalArticles) * 100).toFixed(2)
            )
          })
          // js提取对象数组中的某一个属性组成新数组 的一种方法
        }
      })
  },
  mounted() {
    this.drawChartCircle()
    this.drawChart()
  },
  methods: {
    drawChart(m, c, p) {
      let myEchart = this.$echarts.init(document.getElementById('main'))

      let option = {
        title: {
          text: '文章数量图',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        legend: {
          data: ['数量', '占比'],
        },
        xAxis: [
          {
            type: 'category',
            data: m,
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              formatter: '{value}月',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '总计',
            min: 0,
            interval: 5,
            axisLabel: {
              formatter: '{value}篇',
            },
          },
          {
            type: 'value',
            name: '占比',
            min: 0,
            interval: 5,
            axisLabel: {
              formatter: '{value} %',
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#E6E6FA',
                width: 1,
                type: 'solid',
              },
            },
          },
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 篇'
              },
            },
            data: c,
            barWidth: 40,
          },
          {
            name: '占比',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %'
              },
            },
            data: p,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(183, 75, 238,0.2)',
                },
                {
                  offset: 1,
                  color: 'rgba(250, 207, 18)',
                },
              ]),
            },
          },
        ],
      }
      myEchart.setOption(option)
    },
    drawChartCircle(cate) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('main2'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '文章分类图',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '95%',
            roseType: 'angle',
            // data: [{ value: 235, name: '视频广告' }],
            data: cate,
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 15,
                },
              },
              emphasis: {
                show: true,
              },
            },
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // console.log(cate)
      // console.log(option.series[0].data)
    },
    // get请求 获取文章分类数据
  },
}
</script>

<style>
.EchartPractice {
  display: flex;
}
#main {
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 100px;
}
#main2 {
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 100px;
}
</style>
